<template>
  <custom-modal
    width="1100px"
    :visible="visible"
    :title="''"
    :destroyOnClose="true"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    modalCls=".showStrategyModal"
    @cancel="visible = false"
    class="showStrategyModal"
  >
    <template slot="footer">
      <a-button
        type="primary"
        @click.stop="
          () => {
            visible = false
          }
        "
      >{{ $t('back') }}</a-button>
    </template>
    <a-tabs v-model="tabActive" @change="switchTab" class="tabCommon">
      <a-tab-pane :tab="this.$t('sjcl')" key="1">
        <div class="strategyTab">
          <component
            :is="updateComp"
            :id="updataStrategyId"
            :isReadonly="true"
            v-if="updataStrategyId"
            style="padding:0 24px;"
          ></component>
        </div>
      </a-tab-pane>
      <a-tab-pane :tab="this.$t('tjcl')" key="2">
        <div class="strategyTab">
          <component
            :is="conditionComp"
            :id="conditionStrategyId"
            :taskId="taskId"
            :isReadonly="true"
            v-if="conditionStrategyId"
            style="padding:0 24px;"
          ></component>
        </div>
      </a-tab-pane>
    </a-tabs>
  </custom-modal>
</template>
<script>
import FotaConditionStrategy from '@/views/strategy/FotaCondition/components/ViewStrategy.vue'
import FotaUpdateStrategy from '@/views/strategy/FotaUpdate/components/ViewStrategy.vue'
import CustomModal from '@/components/CustomModal/index.vue'
export default {
  name: 'ShowConditionUpdateStrategy',
  components: {
    FotaConditionStrategy,
    FotaUpdateStrategy,
    CustomModal
  },
  data () {
    return {
      updateComp: 'FotaUpdateStrategy',
      conditionComp: 'FotaConditionStrategy',
      confirmLoading: false,
      visible: false,
      tabActive: '1',
      updataEditRecord: null,
      conditionEditRecord: null,
      conditionStrategyId: ''
    }
  },
  props: {
    strategyType: {
      type: String,
      default: 'Fota'
    },
    updataStrategyId: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    }
  },
  methods: {
    getStrateDetail (id) {
      this.$store.dispatch('getStrategyDetailData', {id}).then(res => {
        const { data } = res
        this.conditionStrategyId = data.conditionStrategyId
      })
    },
    switchTab (value) {
      this.tabActive = value
    }
  },
  watch: {
    tabActive (val) {
      const vm = this
      if (val === '2') {
        // 没有条件策略id时应该先回去条件策略id
        !vm.conditionStrategyId && vm.getStrateDetail(vm.updataStrategyId)
      }
    },
    visible (val) {
      if (val) {
        // 初始化
        this.tabActive = '1'
        this.conditionStrategyId = ''
        // 组件识别
        this.updateComp = `${this.strategyType}UpdateStrategy`
        this.conditionComp = `${this.strategyType}ConditionStrategy`
      }
    }
  }
}
</script>
<style lang="less" scoped>
.strategyTab {
  height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
<style lang="less">
.showStrategyModal {
  .ant-modal-header {
    border-bottom: none;
    padding:5px;
  }
  .ant-tabs-nav-container {
    padding: 0px 24px;
  }
  .ant-modal-body {
    padding: 0 !important;
  }
}
</style>
